<template>
  <el-form :model="param" :rules="rules" ref="loginForm" label-width="50px">
    <el-form-item label="账号" prop="account" class="none-required">
      <el-input placeholder="请输入" v-model="param.account" clearable style="max-width: 332px"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password" class="none-required">
      <el-input placeholder="请输入" type="password" clearable v-model="param.password" style="max-width: 332px"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked">记住账号</el-checkbox>
    <el-button type="text" style="float: right;padding: 5px 15px;" @click="forgetPassword">忘记密码</el-button>

    <input type="submit" style="display: none" @click="login">
    <el-button type="primary" class="log-button" @click="login" :loading="loading">登录</el-button>
  </el-form>
</template>

<script type="text/babel">
	/**
	 * 普通登录
	 */

	export default {
		data() {
			return {
				param: {
					account: localStorage.getItem('account') || 'account',
					password: 'password'
				},
				rules: {
					account: { required: true, message: '请输入账号', trigger: 'blur' },
					password: { required: true, message: '请输入密码', trigger: 'blur' }
				},
				loading: false,
				checked: true,
			}
		},
		methods: {
			login(e) {
				e.preventDefault();
				this.$refs['loginForm'].validate((valid) => {
					if (valid) {
						this.handelLogin()
					}
				});
			},
			handelLogin() {
				const account = this.param.account.trim();
				const password = this.param.password.trim();
				console.log('账号：'+account, '密码：'+password)
				this.$router.push('/index')
			},
			forgetPassword() {
				this.$alert('恕我无能为力', '提示', {
					confirmButtonText: '确定',
					callback() {}
				})
			},
			change() {
				this.$emit('change')
			}
		}
	}
</script>